<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import { Node, DragStart, GroupNode } from "../dto";

@Component
class Nodes extends Vue {
  @Prop(Array) nodes: Array<GroupNode>;
  actives: Array<string> = ["1"];

  /**
   * 开始拖动
   */
  dragstart(e: any, data: Node) {
    let dragParams: DragStart = { ...data, x: e.offsetX, y: e.offsetY };
    e.dataTransfer.setData("node", JSON.stringify(dragParams));
  }
}

export default Nodes;
</script>

<template>
  <div class="workflow-nodes">
    <div class="nodes-title">节点组件</div>
    <div class="nodes-list">
      <div v-for="(category, index) in nodes" :key="index">
        <div class="category-title">{{ category.groupName }}</div>
        <div class="category-nodes">
          <div
            v-for="(node, index) in category.data"
            :key="index"
            class="category-node"
            draggable="true"
            @dragstart="e => dragstart(e, node)"
          >
            <span>{{ node.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
